<!--
 - Author : 003.
 - Date   : 2018/9/25.
 - File   : index.vue.
 -->

<template>
  <div class="page">    
    <div class="page-content">
      <Row :gutter="32" class="page-content-row">
        <i-col :xs="24" :sm="12" :md="12" :lg="6" v-for="(index,item) in orderList">
            <ROW class="page-content-col" @click="turnToDetail(item)"> 
              <i-col  span="18" class="ellipsis"  style="-webkit-box-orient: vertical">{{item.orderName}}</i-col> 
              <i-col  span="6" class="status">
                <Icon type="checkmark-circled"  class="status1" v-if="item.status==='1'"></Icon>
                <Icon type="more" class="status0" v-if="item.status==='0'"></Icon>
                <Icon type="close-circled" class="status2" v-if="item.status==='2'"></Icon>
              </i-col>            
            </ROW>
        </i-col>
      </Row>
    </div>
    <div class="page-foot">
      <div style="width: 500px;margin: auto;" v-if="orderList.length>0">
        <Page :total="count" :current.sync="page" :page-size="pageSize" show-total show-elevator @on-change="getPage(page)"></Page>
      </div>
    </div>
    <div class="fixed-ico" @click="turnToAdd"><img src="../assets/images/add-ico.png" alt=""></div>
  </div>
</template>

<script>
  import {createTab} from '../vuex/action';
  import {token, user} from '../vuex/getter'
  import apiSource from '../wohome-api'
  import {parseJSON, isSuccess} from '../utils'
  import {isEmptyObject} from '../utils/tool';

  export default {
    data() {
      return {
        page:1,
        pageSize:12,
        count:0,
        orderList:[]
      }
    },
    ready() {
      this.getOrderList(this.page)
      console.log(this.token,'!!!!!!!!')
    },
    methods: {
      getPage(page){
        this.getOrderList(page)
      },
      getOrderList(page){
        apiSource({
          type: 'outer',
          service: 'travelOrderPageList',
          ct: {page: page, pageSize: this.pageSize}
        }).then((res) => {
          // console.log(res)
          this.count=res.totalCount
          this.orderList=res.recordList
        })
      },
      turnToAdd(){
        this.$router.go('/add/publish')     
      },
      turnToDetail(item){
        this.$router.go({path: '/add/detail?orderId='+item.id})        
      }
    },
    vuex: {
      getters: {token, user},
      actions: {
        createTab
      }
    },
  }

</script>

<style lang="less" scoped>
 @import "../assets/less/common.less";
    .ellipsis{
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 1;
    }
      .status{
        // float:right;
        font-size: 25px;
      }
      .status0{
        float:right;
        color: #fff;
        background: rgb(7, 155, 253);
        border-radius: 50%;
        padding: 0 2px;
        width: 25px;
        height: 25px;
      }
      .status1{
        float:right;
        color: #08cf58;
      }
      .status2{
        float:right;
        color: rgb(255, 1, 1);
      }
</style>
